import { getMediaList } from '@/api/record'
import { MediaInfo, MediaSearchReqParam, ResPageList } from '@/core/mediaRecorder/apiType'
import { Button, Pagination, Table } from 'ant-design-vue'
import { computed, defineComponent, onMounted, PropType, reactive, Ref, ref, toRaw } from 'vue'
import Search from './search'
import { getTableColoumn } from './mediaListColumn'
export default defineComponent({
  name: 'MediaRecorderList',
  props: {
    setMediaStatus: {
      type: Function,
      default: () => {},
    },
  },
  setup(props) {
    const dataSource: Ref<Partial<ResPageList<MediaInfo>>> = ref({ total: 0, data: [] })
    const loading = ref(false)
    const reqParam: MediaSearchReqParam = reactive({
      title: '',
      page: 1,
      pageSize: 10,
      // startTime: Math.round((Date.now() - 24 * 3600 * 1000) / 100),
      // endTime: Math.round(Date.now() / 100)
    })
    const changeReqParam = (key: keyof MediaSearchReqParam, value: any) => {
      ;(reqParam[key] as any) = value
    }
    const reload = async () => {
      loading.value = true
      dataSource.value = (await getMediaList(reqParam)).data
      loading.value = false
    }
    onMounted(async () => {
      reload()
    })
    const sizeChange = async (current: number, pageSize: number) => {
      reqParam.page = current
      reqParam.pageSize = pageSize
      reload()
    }

    return () => (
      <div class="w-full relative" style={{ backgroundColor: '#F7F7F8' }}>
        <div class={'bg-white mt-2 pl-3 pr-3'}>
          <div class={'absolute m-3 right-5'}>
            <Button
              type={'primary'}
              onClick={() => {
                props.setMediaStatus(true)
              }}
            >
              录制视频
            </Button>
          </div>
          <Search
            reqParam={toRaw(reqParam)}
            changeReqParam={changeReqParam}
            v-slots={{
              default: (param: Partial<MediaSearchReqParam>) => (
                <Button
                  class={'inline-block float-right'}
                  type="primary"
                  onClick={async () => {
                    reload()
                  }}
                >
                  查询
                </Button>
              ),
            }}
          ></Search>
          <div class="mb-8 text-sm">
            <Table
              dataSource={dataSource.value.data}
              scroll={{ x: true }}
              loading={loading.value}
              locale={{ emptyText: '暂无数据' } as any}
              key={'mediaId'}
              size={'small'}
              pagination={false}
              bordered
            >
              {getTableColoumn(reload)}
            </Table>
            <div
              class="text-right mt-5 pb-10"
              style={{ display: 'flex', justifyContent: 'center' }}
            >
              <Pagination
                total={dataSource.value.total}
                current={reqParam.page}
                pageSize={reqParam.pageSize}
                showTotal={() => <div>共{dataSource.value.total}条</div>}
                onChange={sizeChange}
              ></Pagination>
            </div>
          </div>
        </div>
      </div>
    )
  },
})
